<template>
	<view>
		<!-- 导航栏 -->
		<view class="header">
			<view class="nav_bar">
				<view class="head_left">
					<view class="nav_title">最近三年到达或旅经</view>
					<view class="nav_selected">
						已选择 {{selectedNum}} 个<span class="nav_reset" @click="clear">清除</span>
					</view>
				</view>
				<view class="head_right">
					<button class="btn" @click="toMake">下一步</button>
				</view>
			</view>
		</view>
		
		<view class="mainContext">
			<view class="tips">
				* 数据只会在本地处理
				<span class="secrete" @click="secreteDirec">隐私指引</span>
			</view>
			<uni-collapse accordion @change="selectedProvince">
				<view v-for="(item, id) in cityDataList" :key="id">
					<uni-collapse-item :title="item.province">
						<view class="boundary"></view>
						<view class="selectCity">
							<checkbox-group @change="checkboxChange">
								<span>
									<label v-for="(city, id) in item.children" :key=id class="city_label">
										<checkbox ref="checkbox" :value=(item.province+city.city) :checked="city.checked" />{{ city.city }}
									</label>
								</span>
							</checkbox-group>
						</view>
					</uni-collapse-item>
				</view>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import { getAllCity } from '../../api/api.js'
	import Dialog  from 'vant/lib/dialog';
	export default {
		data() {
			return {
				selectedNum: 0,
				cityDataList: [],
				labelInitStatus: false,
				selectedCity: [],
				currentProvince: ''
			}
		},
		created() {
			this.getCityData()
		},
		methods: {
			clear() {
				this.selectedNum = 0
				this.$router.go(0)
			},
			secreteDirec() {
				Dialog.alert({
				  title: '隐私指引',
				  confirmButtonColor: "#1677FF",
				  message: `我们不会收集/存储/上传/分析您的行程数据，数据只在本地处理，请放心使用。`
				}).then(() => {
				  // on close
				});
			},
			toMake() {
				uni.navigateTo({
					url: `/pages/card/card/card?city=${this.selectedCity}`
				})
			},
			async getCityData() {
				const res = await getAllCity()
				this.cityDataList = res.data.provinceJson
			},
			checkboxChange(e) {
				if(this.selectedCity.length === 0) {
					this.selectedCity = this.selectedCity.concat(e.detail.value)
					this.selectedNum = 1
					return
				}
				let tmp = this.selectedCity.filter(city => {
					return !city.includes(this.currentProvince)
				})
				if(e.detail.value.length > 0) {
					this.selectedCity = tmp.concat(e.detail.value)
				} else {
					this.selectedCity = tmp
				}
				this.selectedNum = this.selectedCity.length
			},
			selectedProvince(id) {
				let curPro = this.cityDataList.find(pro => pro.id === (Number(id) + 4))
				this.currentProvince = curPro.province
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 120rpx;
	}
	.nav_bar {
		position: fixed;
		display: flex;
		flex-direction: row;
		justify-items: space-between;
		width: 100%;
		height: 120rpx;
		background-color: #ededed;
		z-index: 999;
		
		.head_left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 280rpx;
			padding-left: 20rpx;
			// background-color: #2da568;
			
			.nav_title {
				width: 280rpx;
				height: 44rpx;
				font-size: 28rpx;
			}
			
			.nav_selected {
				width: 280rpx;
				height: 44rpx;
				font-size: 24rpx;
				color: #8c8c8c;
				.nav_reset {
					color: #576b95;
					margin-left: 6rpx;
				}
			}
		}
		
		.head_right {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin-left: 280rpx;
			.btn {
				width: 142rpx;
				height: 58rpx;
				line-height: 58rpx;
				font-size: 28rpx;
				color: #fff;
				background-color: #2da568;
			}
		}

	}
		
	.tips {
		height: 55rpx;
		line-height: 55rpx;
		font-size: 24rpx;
		color: #BFBFBF;
		margin-top: 4rpx;
		padding-left: 20rpx;
		border-bottom: 3rpx solid #ebeef5;
		.secrete {
			color: #576B95;
			margin-left: 4rpx;
			text-decoration: underline;
		}
	}
	.boundary {
		content: "";
		width: 750rpx;
		border-top: 3rpx solid #ebeef5;
	}
	.selectCity {
		font-size: 28rpx;
		padding: 30rpx 60rpx;
		.city_label {
			line-height: 54rpx;
			white-space: nowrap;
		}
	}
	.uni-label-pointer {
		color: #999;
		margin-right: 14rpx;
	}
	::v-deep uni-checkbox .uni-checkbox-input {
		width: 36rpx;
		height: 36rpx;
		border-radius: 36rpx;
	}
</style>
